<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--1、头部-->
<head>
    <meta charset="UTF-8">
    <!--移动端的：缩放-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
          th:href="@{/css/semantic.css}">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
    <title>后台登录页面</title>
</head>

<!--2、、js引用-->
<div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"
            th:src="@{/js/semantic.js}"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</div>

<!--3、中间内容-->
<body class="bg-end">
<div class="login_style">
    <div class="m-container-small m-padded-tb-massive " style="max-width: 30em !important;">
        <div class="ui container">
            <div class="ui middle aligned center aligned grid">
                <div class="column">
                    <form method="post" action="/after/login" th:action="@{/after/login}" class="ui large form"
                          onsubmit="encryption()">
                        <div class="ui segment">
                            <div class="field">
                                <div class="ui left icon input">
                                    <i class="user icon"></i>
                                    <input type="text" id="username" name="username"
                                           placeholder="用户名" required
                                           pattern="[a-zA-Z0-9]{4,10}"/>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui left icon input">
                                    <i class="lock icon"></i>
                                    <input type="password" id="pwd" placeholder="密码" required
                                           pattern="[a-zA-Z0-9]{6,16}">
                                    <input type="password" name="password" id="md5pwd" hidden/><br/>
                                </div>
                            </div>
                            <button class="ui fluid large teal button submit">
                                登 录
                            </button>
                        </div>

                        <div class="ui error mini message"></div>
                        <div class="ui negative mini message" th:unless="${#strings.isEmpty(message)}"
                             th:text="${message}"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

    //4-2、表单：密码加密
    function encryption() {
        md5pwd.value = md5(pwd.value);
    }
</script>

</html>